<template>
    <div style="padding: 10px">
        <el-card>
            <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
        </el-card>
    </div>
</template>

<script>
    import request from "@/utils/request";
    import * as echarts from 'echarts'
    export default {
        name: "Home",
        data() {
            return {

            }
        },

        mounted() {
            this.drawLine();
        },

        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'))
                let option = {
                    title: {
                        text: '各地区用户比例统计图',
                        subtext: '虚拟数据',
                        left: 'left'
                    },
                    legend: {
                        trigger: 'item'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '用户比例',
                            type: 'pie',
                            radius: [50, 250],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: []
                        }
                    ]
                }
                request.get("/user/count").then(res => {
                    res.data.forEach(item => {
                        option.series[0].data.push({name: item.address, value: item.count})
                    })
                    // 绘制图表
                    myChart.setOption(option);
                })

            },
            //留言相关
            tooltip: {
                trigger: 'item'
            },
        }
    }
</script>

<style scoped>

</style>
